<nav id="navbar" class="navbar is-fixed-top " style="  transform: translateY(0px);  ">
  <div id="specialShadow" class="bd-special-shadow" style="opacity: 0; transform: scaleY(1);"></div>

  <div class="container">

    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox"
             width="112" height="28">
      </a>

      <a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
      <span class="icon" style="color: #333;">
        <i class="fa fa-lg fa-github"></i>
      </span>
      </a>

      <a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
      <span class="icon" style="color: #55acee;">
        <i class="fa fa-lg fa-twitter"></i>
      </span>
      </a>

      <div id="navbarBurger" class="navbar-burger burger" data-target="navMenuDocumentation">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div id="navMenuDocumentation" class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link  is-active" href="/documentation/overview/start/">
            Docs
          </a>
          <div class="navbar-dropdown ">
            <a class="navbar-item " href="/documentation/overview/start/">
              Overview
            </a>
            <a class="navbar-item " href="https://bulma.io/documentation/modifiers/syntax/">
              Modifiers
            </a>
            <a class="navbar-item " href="https://bulma.io/documentation/columns/basics/">
              Columns
            </a>
            <a class="navbar-item " href="https://bulma.io/documentation/layout/container/">
              Layout
            </a>
            <a class="navbar-item " href="https://bulma.io/documentation/form/general/">
              Form
            </a>
            <a class="navbar-item " href="https://bulma.io/documentation/elements/box/">
              Elements
            </a>
            <a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
              Components
            </a>
            <hr class="navbar-divider">
            <div class="navbar-item">
              <div>
                <p class="is-size-6-desktop">
                  <strong>0.6.1</strong>
                </p>

                <small>
                  <a class="bd-view-all-versions" href="https://versions.bulma.io/">View all versions</a>
                </small>

              </div>
            </div>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link " href="https://bulma.io/blog/">
            Blog
          </a>
          <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">

            <a class="navbar-item" href="/2017/11/14/bulma-is-on-patreon/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-link">14 Nov 2017</small>
                </p>
                <p>Bulma is on Patreon!</p>
              </div>
            </a>

            <a class="navbar-item" href="/2017/11/01/fixed-navbar/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-link">01 Nov 2017</small>
                </p>
                <p>New feature: fixed navbar</p>
              </div>
            </a>

            <a class="navbar-item" href="/2017/10/22/list-of-buttons/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-link">22 Oct 2017</small>
                </p>
                <p>New feature: list of buttons</p>
              </div>
            </a>

            <a class="navbar-item" href="https://bulma.io/blog/">
              More posts
            </a>
            <hr class="navbar-divider">
            <div class="navbar-item">
              <div class="navbar-content">
                <div class="level is-mobile">
                  <div class="level-left">
                    <div class="level-item">
                      <strong>Stay up to date!</strong>
                    </div>
                  </div>
                  <div class="level-right">
                    <div class="level-item">
                      <a class="button bd-is-rss is-small" href="https://bulma.io/atom.xml">
                      <span class="icon is-small">
                        <i class="fa fa-rss"></i>
                      </span>
                        <span>Subscribe</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <div class="navbar-link">
            More
          </div>
          <div id="moreDropdown" class="navbar-dropdown ">
            <a class="navbar-item " href="https://bulma.io/backers/">
              <p>
                <strong>Patreon backers</strong>
                <br>
                <small>Everyone who is supporting Bulma</small>
              </p>
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item " href="https://bulma.io/bulma-start/">
              <p>
                <strong>Bulma start</strong>
                <br>
                <small>A tiny npm package to get started</small>
              </p>
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item " href="https://bulma.io/made-with-bulma/">
              <p>
                <strong>Made with Bulma</strong>
                <br>
                <small>The official community badge</small>
              </p>
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item " href="https://bulma.io/extensions/">
              <p>
                <strong>Extensions</strong>
                <br>
                <small>Side projects to enhance Bulma</small>
              </p>
            </a>
          </div>
        </div>
        <a class="navbar-item " href="https://bulma.io/expo/">
          <span class="bd-emoji">⭐️</span>
          Expo
        </a>
        <a class="navbar-item " href="https://bulma.io/love/">
          <span class="bd-emoji">❤️</span>
          Love
        </a>
      </div>

      <div class="navbar-end">
        <a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
        <span class="icon" style="color: #333;">
          <i class="fa fa-lg fa-github"></i>
        </span>
        </a>
        <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
        <span class="icon" style="color: #55acee;">
          <i class="fa fa-lg fa-twitter"></i>
        </span>
        </a>
        <div class="navbar-item">
          <div class="field is-grouped">
            <p class="control">
              <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet"
                 data-social-target="https://bulma.io" target="_blank"
                 href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
  <span class="icon">
    <i class="fa fa-twitter"></i>
  </span>
                <span>
    Tweet
  </span>
              </a>

            </p>
            <p class="control">
              <a class="button is-primary"
                 href="https://github.com/jgthms/bulma/releases/download/0.6.1/bulma-0.6.1.zip">
              <span class="icon">
                <i class="fa fa-download"></i>
              </span>
                <span>Download</span>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</nav>
